<template>
  <div class="installTeam-box">
    <!-- 施工队管理 -->
    <serchForm
      :Form="inventoryForm"
      :FormLabel="inventoryFormLabel"
      @onSearch="onSearch"
    />
    <div
      class="function-box"
      v-if="checkPermi(['system:teams:edit'])"
    >
      <el-button
        class="createBtn"
        @click="addOutboundOrder"
      ><i class="iconfont icon-plus-square" />新增</el-button>
      <el-button
        class="exportBtn"
        @click="deleteData"
      ><i class="iconfont icon-shanchu" />删除</el-button>
      <el-button
        class="reviseBtn"
        @click="updateInfo"
      ><i class="iconfont icon-xiugai" />修改</el-button>
    </div>
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      @tableDetail="tableDetail"
    >
    </forTableCom>
    <installTeamCom
      @popUpsFlase="popUpsFlase"
      v-if="flag"
      :popTitle="popTitle"
      :disabled="disabled"
      @getoutboundOrderData="getoutboundOrderData"
      :PopData="PopData"
      :defindFlag="defindFlag"
    />
    <updateInstallTeamCom
      v-if="updateInfoFlag"
      :constructionTeamList="constructionTeamList"
      @popUpsFlaseUpdate="updateInfoFlag=false"
      @getoutboundOrderData="getoutboundOrderData"
    />
  </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue'
import updateInstallTeamCom from './components/updateInstallTeamCom'
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import installTeamCom from './components/installTeamCom'
import { listTeams } from '@/api/teams'
let constructionTeamList = ref(null)
import { checkPermi } from "@/utils/permission.js";

// 弹窗
let flag = ref(false)
let disabled = ref(false)
// 修改
let updateInfoFlag = ref(false)
// 弹窗标题
let popTitle = ref('新增出库单信息')
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')

// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])
// 修改详情回显数据弹窗
let PopData = ref([])
// 详情控制变量
let defindFlag = ref(true)

// 删除勾选的列二次提示
const deleteData = () => {
  // ElMessageBox.confirm(
  //     '你确定要删除勾选的数据吗?',
  //     '警告',
  //     {
  //         confirmButtonText: '删除',
  //         cancelButtonText: '取消',
  //         type: 'warning',
  //     }
  // )
  //     .then(() => {
  //         // 调用删除入库单的接口
  //         if (multipleSelection.value.length > 1) {
  //             ElMessage({
  //                 type: 'warning',
  //                 message: '只能一条一条删除，禁止多个删除数据(@&@)',
  //             })
  //         } else {
  //             let deleteRow = {}
  //             multipleSelection.value.forEach(v => {
  //                 deleteRow = {
  //                     'outboundId': v.outboundId,
  //                     'outboundType': v.outboundType,
  //                     'productName': v.productName,
  //                     'custId': v.custId,
  //                 }
  //             })
  //             // 删除数据
  //             deleteSelectOutbound(deleteRow)
  //         }
  //     })
  //     .catch(() => {
  //         ElMessage({
  //             type: 'info',
  //             message: '取消成功',
  //         })
  //     })
}
// 勾选背景id
const idActive = 'constructionTeamId'

// 表单
let inventoryForm = ref(
  {
    constructionTeamId: '',         // 施工队编号
    constructionTeamName: '',       // 施工队名称
    constructionTeamType: '',       // 施工队类别
    constructionPhone: '',      // 施工队电话
  }
)
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'constructionTeamId',
    label: '施工队编号',
  },
  {
    name: 'constructionTeamName',
    label: '施工队名称',
  },
  {
    name: 'constructionTeamType',
    label: '施工队类别',
    type: 'select',
    client: [
      {
        label: '固定施工队',
        value: '0'
      },
      {
        label: '临时施工队',
        value: '1'
      },
    ]
  },
  {
    name: 'constructionPhone',
    label: '施工队电话'
  },
])

// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'constructionTeamId',
    label: '施工队编号',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'constructionTeamRegion',
    label: '施工队区域',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'constructionTeamName',
    label: '施工队名称',
    minwidth: 100
  },
  {
    prop: 'constructionTeamType',
    label: '施工队类别',
    minwidth: 100
  },
  {
    prop: 'constructionPhone',
    label: '施工队电话',
    minwidth: 100
  },
  {
    prop: 'constructionTeamInsuranceType',
    label: '施工队保险类别',
    minwidth: 120
  },
  {
    prop: 'constructionTeamMonthEnd',
    label: '施工队月结',
    minwidth: 100
  },
  {
    prop: 'constructionTeamTemporaryPayment',
    label: '施工队临时支付',
    minwidth: 120
  },

  {
    prop: 'takeOrdersDate',
    label: '接单日期'
  },
  {
    prop: 'completionDate',
    label: '完工日期'
  },
  {
    prop: 'type',
    label: '状态'
  },
])
// 表格数据内容
let inventoryTableData = ref([

])

// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
}


// 打开新增弹窗
const addOutboundOrder = () => {
  flag.value = true
  disabled.value = false
  popTitle.value = '新增施工队'
}
// 修改弹窗
const updateInfo = () => {
  if (multipleSelection.value.length == 1) {
    updateInfoFlag.value = true
    constructionTeamList.value = multipleSelection.value[0]
  } else {
    ElMessage({
      type: 'warning',
      message: '勾选一个@^@',
    })
  }
}
// 详情双击行
const tableDetail = (props) => {
  disabled.value = true
  flag.value = true
  popTitle.value = '施工队详情信息'
  defindFlag.value = false
  PopData.value = props
}
// 关闭弹窗
const popUpsFlase = (v) => {
  flag.value = v
  defindFlag.value = true
}


// 查询数据
const listTeamsFn = async (data = '') => {
  let res = await listTeams(data)
  let { code, rows, total } = res
  if (code == 200) {
    // 改变日期显示长度问题
    inventoryTableData.value = rows
    totals.value = total
  }
}

// 查找
const onSearch = (v) => {
  // 每次查询后回到页1
  pageNum.value = 1
  listTeamsFn(v)
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  let obj = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(obj, inventoryForm.value)
  listTeamsFn(params)
}
// 请求接口函数
const getoutboundOrderData = () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  listTeamsFn(params)
}

onMounted(() => {
  listTeamsFn()
})
</script>
<style scoped lang='scss'>
.installTeam-box {
  padding: 16px;
}
</style>
